//引入React核心库
import { lazy, Suspense } from "react";
//引入封装好的全局导航守卫
import PrivateRoute from './util/PrivateRoute'
// console.log(React,'核心库');
// 引入封装好的样式
import "./assets/css/index.css";
import { Switch, Route, Redirect } from "react-router-dom";

//引入一级路由组件
// import Index from "./pages/index";
// import Order from './pages/oreder'
//把订单页变成懒加载
const Index = lazy(() => import("./pages/index"));
const Order = lazy(() => import("./pages/oreder"));
const Detail = lazy(()=>import("./pages/detail"))
const Login = lazy(()=>import("./pages/login"))
const Register = lazy(()=>import("./pages/register"))
// import Detail from "./pages/detail";
//引入路由插件

function App() {
  return (
    <div className="App">
      {/* 一级路由出口 */}
      <Suspense fallback={<div>加载中~~~~~</div>}>
        <Switch>
          {/* 
          Route 里面有好多属性
          path 地址
          component 组件
          exact 是否是精准匹配 默认是false 
          strict 开启严格模式 ，严格模式必须和exact（精准匹配）一起使用，如果地址后加了'/'， 严格模式下 不认可
          */}
          <Route exact  path='/' component={Login}></Route>
          <Route  path='/register' component={Register}></Route>
          <PrivateRoute path="/index" component={Index}></PrivateRoute>

          <PrivateRoute strict exact path="/order" component={Order}></PrivateRoute>

          <PrivateRoute path="/detail/:id" component={Detail}></PrivateRoute>
          {/* <Route path='/' component={Login}></Route> */}
          {/* <Redirect to="/"></Redirect> */}
        </Switch>
      </Suspense>
    </div>
  );
}

export default App;
